<template>
  <a-col :xl="{ span: 24 }" :lg="{ span: 24 }" :md="{ span: 24 }">
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
      <tags :ref="data.fieldCode" :tagAlias="data.fieldAliase" @change="change"></tags>
      <div class="ant-form-item-control has-error" v-if="errmsg">
        <span class="ant-form-item-children">
          <div class="ant-form-explain">{{ errmsg }}</div>
        </span>
      </div>
    </a-form-item>
  </a-col>
</template>
<script>
  import tags from '@/components/Tags'
  export default {
    name: 'InputTag',
    components: {
      tags
    },
    props: {
      form: {
        type: Object,
        required: true
      },
      data: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 0
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 24
          }
        },
        errmsg: null,
        rules: []
      }
    },
    created () {

    },
    methods: {
      init (tags, tagsArr) {
        const data = this.data
        const fieldAliase = data.fieldAliase
        if (data.isRequired) {
           if (!tags) {
              this.errmsg = fieldAliase + '必填'
              throw new Error('标签必填!')
           }
        }
        if (data.maxlength) {
           if (tagsArr && tagsArr.length > data.maxlength) {
             this.errmsg = fieldAliase + '个数不能大于' + data.maxlength
             throw new Error('标签个数不能大于' + data.maxlength + '个')
           }
        }
      },
      getFieldValue () {
        const tags = this.$refs[this.data.fieldCode].getTagStr()
        const tagsArr = this.$refs[this.data.fieldCode].getTagArr()
        this.init(tags, tagsArr)
        return tags
      },
      setFieldValue (value) {
        if (value) {
          if (value instanceof Array) {
             this.$refs[this.data.fieldCode].setTagArr(value)
          } else {
             this.$refs[this.data.fieldCode].setTags(value)
          }
        }
      },
      fieldClear () {
        this.$refs[this.data.fieldCode].clearTags()
      },
      change () {
        this.errmsg = null
      }
    }
  }
</script>
